<template>
	<view>
		<view class="tab">请选择座位</view>
		<view class="pai">
			<view class="kuai">
				<view
					class="kuai-1"
					style="background:url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/hasbody.png) center center no-repeat;
		background-size: 100% 100%;"
				></view>
				<view class="wen">使用中</view>
			</view>
			<view class="kuai">
				<view
					class="kuai-1"
					style="background:url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/leave.png) center center no-repeat;
		background-size: 100% 100%;"
				></view>
				<view class="wen">暂离</view>
			</view>
			<view class="kuai">
				<view
					class="kuai-1"
					style="background:url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/nobody.png) center center no-repeat;
		background-size: 100% 100%;"
				></view>
				<view class="wen">预约中</view>
			</view>
			<view class="kuai">
				<view
					class="kuai-1"
					style="background:url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/ischoose.png) center center no-repeat;
		background-size: 100% 100%;"
				></view>
				<view class="wen">可选</view>
			</view>
		</view>
		<!-- <view class="allbox" scroll-y style="height:100%;">
			<view class="box_box" v-for="(item,index) in seat" :key="index" :class="[
			                  item.status == 0
			                    ? 'red'
			                    : item.status == 1
			                    ? 'gray'
			                    : item.status == 2 ?
			                    'skyblue' : 'green'
			                ]" @click="search(item.id)">box_box</view>

		</view> -->

		<view class="seat_body">
			<movable-area>
				<movable-view :inertia="true" :scale="true" out-of-bounds="true" :scale-min="0.95" :scale-max="4" direction="all">
					<view class="allbox" scroll-y style="height:100%;">
						<view v-for="(item, index) in seatArray" :key="index" >
							<view v-for="(seat, col) in item" :key="col"  style="width: 80rpx ; height: 80rpx;margin-left:4rpx;">
								<view class="box_box skyblue" v-if="seat.status == '1'" @click="ChangeSeatStatus(index, col), aaa(index, col)"></view>
								<view class="box_box red"  v-else-if="seat.status == '2'" @click="ChangeSeatStatus(index, col), aaa(index, col)"></view>
								<view class="box_box gray" v-else-if="seat.status == '0'" @click="ChangeSeatStatus(index, col), aaa(index, col)"></view>
								<view class="box_box green" v-else @click="ChangeSeatStatus(index, col), aaa(index, col)"></view>
								<!-- <view
									class="box_box"
									:class="seat === 0 ? 'gray' : seat === 1 ? 'skyblue' : seat === 2 ? 'red' : 'green'"
									@click="ChangeSeatStatus(index, col), aaa(index, col)"
								></view> -->
							</view>
						</view>
					</view>
				</movable-view>
			</movable-area>
		</view>

		<u-modal :show="shown" :showCancelButton="true" :title="title" @cancel="cancel" @confirm="confirm">
			<view class="slot-content"><rich-text :nodes="content"></rich-text></view>
		</u-modal>
		<!-- 确认选座按钮 -->
		<view @click="sure()" class="footar" v-show="isChoose == false"><view class="">确认选座</view></view>
		<!-- 	<view class=" footar" @click="shown = true">
			<navigator url="/pages/fun/confirm_seat/confirm_seat">确认选座</navigator>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 设置座位为一个二维数组,-1为非座位,0为可选座位,1为暂离座位,2为有人位置，3为已选座位
			seatArray: [], //定义一个座位二维数组
			seatRow: 5, //定义行数
			seatCol: 5, //定义列数
			show: true,
			// isShow: false,
			shown: false,
			title: '警告',
			content: '你还没有选择座位',
			location_row: '', //显示的座位行列数
			location_col: '',
			datas: {},
			selectSeatRow: null, //选中行位置
			selectSeatCol: null, //选中列位置
			areaId:-1,//选择的阅览室的id
			isChoose:true,//false表示这个用户没有选座
			isChooseSeat:null,//选中的位置id
		};
	},
	onPullDownRefresh() {
		console.log('refresh');
		this.initSeatArray();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	},
	methods: {
		aaa(row, col) {
			// console.log(this.seatArray);
			// var event = window.event||arguments[0];
			// console.log(   event );
			// console.log(row,col);
			this.location_row = row + 1;
			this.location_col = col + 1;

			// console.log(this.location_row,this.location_col )
		},
		confirm() {
			this.shown = false;
			this.datas.row = this.location_row;
			this.datas.col = this.location_col;
			this.datas.id = 1;
			setTimeout(() => {
				// 3秒后自动关闭
				if (!(this.location_row == 0) || !(this.location_col == 0)) {
					uni.navigateTo({
						url: '/pages/fun/confirm_seat/confirm_seat?seatId=' + this.isChooseSeat
					});
				}
			}, 1000);
			
			if(this.isChooseSeat){
				uni.$u.http.post('/app/seat/updateSeatStatus/'+this.isChooseSeat+'/'+2).then(res => {
				
				}).catch(err => {
				
				})
				uni.$u.http.post('/app/appoint//addAppoint/'+this.isChooseSeat).then(res => {
			
				
				}).catch(err => {
				
				});
			}
		
			
		},
		cancel() {
			this.shown = false;
		},
		// 确定选座
		sure() {
			this.shown = true;
			if (this.location_row > 0) this.content = '你确定选择第 ' + this.location_col + ' 行 ' + this.location_row + ' 列的座位吗';
		},
		search(id) {
			this.show = true;
		},
		// 处理位置的状态
		ChangeSeatStatus(row, col) {
			// console.log(this.seatArray);
			console.log(this.seatArray[row][col].seatId);
			this.isChooseSeat = this.seatArray[row][col].seatId
			let seatValue = this.seatArray[row][col].status;
			let newArray = this.seatArray;
			// console.log(seatValue);
			if (seatValue === -1 || seatValue === 2) return;
			if (seatValue === 0) {
				newArray[row][col].status = 3;
				if(this.selectSeatRow!=null&&this.selectSeatCol!=null){
					
					newArray[this.selectSeatRow][this.selectSeatCol].status = 0
				}
				this.selectSeatRow = row
				this.selectSeatCol = col
				console.log(this.selectSeatRow); 
			}
		
			if (seatValue === 3) {
				newArray[row][col].status = 0;
			}
			// 再整体更新数组 必须slice复制一个数组
			this.seatArray = newArray.slice();
			// console.log(this.seatArray);
		},
		initSeatArray() {
			uni.$u.http
				.post('/app/seat/getSeatsStatus', { areaId: this.areaId, rowLength: 1 })
				.then(res => {
					console.log(res.data);
					let newArray = [];
					
					res.data.forEach(item => {
						// console.log(item.status);
						let newArrayList = {
							status:item.status,
							seatId:item.seatId
						}
						newArray.push(newArrayList)
						// console.log(newArrayList,newArray);
						// newArray.push(item.status);
					});
					// console.log(newArrayList);
					console.log(newArray);
					if(this.areaId)
					this.seatArray = this.arrTrans(3, newArray);
				
				})
				.catch(err => {});
				
				uni.$u.http
					.get('/app/seat/isAppoint')
					.then(res => {
						console.log("isAppoint",res.data);
						this.isChoose = res.data
					})
					.catch(err => {});
		},
		arrTrans(num, arr) {
			// 一维数组转换为二维数组
			const iconsArr = []; // 声明数组
			arr.forEach((item, index) => {
				const page = Math.floor(index / num); // 计算该元素为第几个素组内
				if (!iconsArr[page]) {
					// 判断是否存在
					iconsArr[page] = [];
				}
				iconsArr[page].push(item);
			});
			return iconsArr;
		}
		/* // 初始化数组		静态数据
			initSeatArray(){
				  // 把数组里的所有数都变成为无座
				  let setSeatArray = Array(this.seatRow).fill(0).map(()=>Array(this.seatCol).fill(0));
				 console.log(setSeatArray);
				 let aaa = [[1,0,0,1,0],[0,1,1,2,0]]
				console.log(aaa);
				  this.seatArray = setSeatArray;
				  // this.seatArray = aaa;
				  // 初始化不是座位的地方
				  // this.initNonSeatPlace();
				  console.log(this.seatArray)
			   }, */
	},
	onLoad(params) {
		console.log(params);
		this.areaId= params.id;
		console.log(params.id);
		// console.log('这个区域的id' + params.id);
		this.seat = this.seat;
		this.initSeatArray();
	},
	mounted: function() {
		// this.initSeatArray();
	}
};
</script>

<style>
page {
	background-color: #f8f8f8;
}
w80{
	width: 80rpx;
	height: 80rpx;
}
.tab {
	width: auto;
	text-align: center;
	margin-top: 10rpx;
	color: #a1caf1;
	font-size: 50rpx;
	font-weight: 700;
}

.pai {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 10rpx;
}

.kuai {
	display: inline-block;
	height: 70rpx;
	margin-left: 2.5%;
}

.kuai-1 {
	display: inline-block;
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.wen {
	width: auto;
	height: 40rpx;
	font-size: 30rpx;
	display: inline-block;
}

.allbox {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	margin-bottom: 50rpx;
	margin-top: 80rpx;
	/* margin-left: 100rpx;/ */
}

.box_box {
	width: 90%;
	height: 90%;
}

.footar {
	padding: 10px 0;
	height: 8%;
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	border-radius: 23rpx 23rpx 0 0;
}

.footar > view {
	width: 75%;
	height: 80%;
	margin: auto;
	margin-top: 1.8%;
	background-color: #d19fe8;
	text-align: center;
	line-height: 215%;
	font-size: 38rpx;
	color: #ffffff;
	border-radius: 10rpx;
}

movable-area {
	margin-top: 10px;
	height: 1200rpx;
	width: 100%;
	display: flex;
	/* justify-content: center; */
}

movable-view {
	width: 100%;
	height: 1200rpx;
	background-color: #8c92ac;
}

.red {
	/* 	width: 100rpx;
		height: 100rpx; */
background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/hasbody.png) center center no-repeat;
	background-size: 70% 70%;
	/* background-color: red; */
}

.gray {
	background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/nobody.png) center center no-repeat;
	background-size: 70% 70%;
}

.skyblue {
	background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/leave.png) center center no-repeat;
	background-size: 70% 70%;
}

.green {
	background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/seat/ischoose.png) center center no-repeat;
	background-size: 70% 70%;
}

/* 	.gray {
		background: url(../../../static/seat/nobody.png) center center no-repeat;
		background-size: 70% 70%;
	}

	.skyblue {
		background: url(../../../static/seat/leave.png) center center no-repeat;
		background-size: 70% 70%;
	}

	.green {
		background: url(../../../static/seat/ischoose.png) center center no-repeat;
		background-size: 70% 70%;
	} */
</style>
